<script setup>
onMounted(() => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animation')
            }
            //else {
            //     entry.target.classList.remove('animation')
            // }
        })
    })
    const hiddenElements = document.querySelectorAll('.flag')
    hiddenElements.forEach(element => {
        observer.observe(element)
    })
})
</script>

<template>
    <div class="main">
        <div class="topBack">
            索然所幸运，我遇见了你
        </div>
        <div class="content flag" :class="{ 'show-animation': contentVisible }">
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
        </div>
        <div class="footer" :class="{ 'show-animation': footerVisible }">
            <span class="flag">关于底部</span>
        </div>
        <div class="content flag" :class="{ 'show-animation': contentVisible }">
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
        </div>
        <div class="content flag" :class="{ 'show-animation': contentVisible }">
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
            <div class="item">非常好的内容</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: auto;

    .topBack {
        width: 100%;
        height: calc(100vh - 80px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content {
        display: flex;
        justify-content: center;

        .item {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center
        }
    }

    .footer {
        width: 100%;
        height: 500px;
        background-color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center
    }
}

.flag {
    opacity: 0;
    filter: blur(10px);
    transition: all 1s;
    transform: translateX(-100%);
}

.animation {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
</style>